<template>
  <div class="left edit">
    <el-form
      :model="state.params"
      label-width="60px"
      :rules="rules"
      ref="ruleFormRef"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="state.params.title" placeholder="请填写标题" />
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="state.params.author" placeholder="请填写作者名字" />
      </el-form-item>
      <el-form-item label="关键字" prop="keyword">
        <el-input
          v-model="state.params.keyword"
          placeholder="请填写文章关键字"
        />
      </el-form-item>
      <el-form-item label="描述" prop="descri">
        <el-input v-model="state.params.descri" placeholder="请填写文章描述" />
      </el-form-item>
      <el-form-item>
        <el-col :span="5">
          <el-form-item prop="state">
            <el-select
              v-model="state.params.region"
              placeholder="请选择文章状态"
            >
              <el-option label="发布" value="push" />
              <el-option label="草稿" value="draft" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="17" style="margin-left: 10px">
          <el-form-item prop="tags">
            <el-select
              v-model="state.params.tags"
              multiple
              placeholder="请选择标签"
            >
              <el-option
                v-for="item in state.options"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-button
            :loading="state.btnLoading"
            @click="beforeSubmit(ruleFormRef)"
            >提交</el-button
          >
        </el-col>
      </el-form-item>
    </el-form>
    <MdEditor v-model="state.params.content" />
    <!-- <markdown-editor v-model="content"></markdown-editor> -->
  </div>
</template>

<script lang="ts" setup>
// import VueSimplemde from 'vue-simplemde'// 引入文本编辑器
// import 'simplemde/dist/simplemde.min.css' // 引入文本编辑器样式
import showdown from "showdown";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { reactive, ref, onMounted, router, route } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { AddArticle, GetTagList, GetArtiDetail,UpdateArticle } from "../api/api";
import { Params, ArtiDetailParams, ArtiDetailInfo } from "../type/index";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
// import markdownEditor from 'vue-simplemde/src/markdown-editor'
const ruleFormRef = ref<FormInstance>();
const state = reactive({
  isUpdate:false,
  btnLoading: false,
  params: {
    id:"",
    title: "",
    author: "",
    keyword: "",
    descri: "",
    state: "",
    tags: [],
    content: "",
    numbers: 0,
  },
  Tagparams: {
    keyword: "",
    pageNum: 1,
    pageSize: 100,
  } as Params,
  artiParams: {
    id: "",
    type: 1,
  } as ArtiDetailParams,
  // articleDetail: {
  //   toc: "",
  //   author: "biaochenxuying",
  //   category: [],
  //   comments: [],
  //   create_time: "",
  //   desc: "",
  //   content: "",
  //   id: -1,
  //   img_url: "",
  //   numbers: 0,
  //   keyword: [],
  //   like_users: [],
  //   meta: { views: 0, likes: 0, comments: 0 },
  //   origin: 0,
  //   state: 1,
  //   tags: [],
  //   title: "",
  //   update_time: "",
  // } as ArtiDetailInfo,
  res: null,
  options: [],
});

const rules = reactive<FormRules>({
  title: [
    { required: true, message: "请输入文章标题", trigger: "blur" },
    { min: 1, message: "长度必须大于0", trigger: "blur" },
  ],
});
const beforeSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      submit();
    } else {
      ElMessage({
        message: "请输入正确的文章标题!",
        type: "error",
      });
    }
  });
};
const handleSearch = async (): Promise<void> => {
  const res = await GetTagList(state.params);
  const data = res.data;
  // console.log("data:", data);
  state.options = [...data.list];
};
const getDetail = async (article_id: string|string[]): Promise<void> => {
  const res = await GetArtiDetail({ id: article_id });
  state.params.title=res.data.title
  state.params.descri=res.data.descri
  state.params.author=res.data.author
  state.params.keyword=res.data.keyword
  state.params.content=res.data.content
  state.params.tags=res.data.tags
};
const submit = async () => {
  // title,author,keyword,content,descri,img_url,tags,numbers
  state.params.numbers = state.params.content.length;
  state.btnLoading = true;
  const converter = new showdown.Converter();
  console.log(state.params.content);
  console.log(converter.makeHtml(state.params.content));
  if(state.isUpdate){
     state.res = await UpdateArticle(state.params);
  }else{
     state.res = await AddArticle(state.params);
  }
  state.btnLoading = false;
  console.log("res:", state.res);
  if (state.res.code === 0) {
    ElMessage({
      message: "提交成功！",
      type: "success",
    });
  }
};
onMounted(() => {
  handleSearch();
  if (route.query.article_id) {
    state.params.id=route.query.article_id
    state.isUpdate=true;
    getDetail(route.query.article_id);
  }
});
</script>

<style scoped lang="less">
.edit {
  // width: 100%;
  height: 100%;
  //  overflow: hidden;
  padding: 40px 5px 20px 40px;
  border: 1px solid rgb(228, 231, 237);
  // background: red;
}
</style>
